<template>
	<div>
		<ul class="list">
			<!-- touchstart、touchmove 、touchend 是v-on 自带函数，分别代表接触，移动，终止-->
			<li
				class="item"
				v-for="item of letters"
				:key="item"
				:ref="item"
				@touchstart.prevent="handleTouchStart"
				@touchmove="handleTouchMove"
				@touchend="handleTouchEnd"
				@click="handleLetterClick"
			>{{item}}</li>
		</ul>
	</div>
</template>

<script>
export default {
  name: "CityAlphabet",
  props:{
    cities:Object
  },
  data() {
    return {
      touchStatus:false,
      startY:0,
      timer:null
    }
  },
  updated() {
    this.startY = this.$refs['A'][0].offsetTop
  },

  // 定义的计算属性获得父组件传来的cities对象，通过for循环拿到对象里的对象组成一个数组
  computed: {
    letters(){
      const letters = [];
      for(let i in this.cities){
        letters.push(i)
      }
      return letters
    }
  },
  methods: {

    // 点击事件
    handleLetterClick(e){

      // 定义一个自定义事件，通过$emit发送给父组件，标识触发的是change，传输内容是e.target.innerText（A-Z）
      this.$emit('change',e.target.innerText);
    },

    //拖动事件
    handleTouchStart(){
      this.touchStatus = true
    },
    handleTouchMove(e){
      if(this.touchStatus){

        // 函数节流
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          
          // 通过$refs 获得的数组A，其中第0下标才是‘A’所在位置，offsetTop获取A距离顶部的像素（通过计算得出是79）
          // const startY = this.$refs['A'][0].offsetTop

          // 传入e对象是屏幕点击事件所在处 e.touches[0].clientY 获取点击处所距离顶部的位置，-79获取相对A的位置
          const touchY = e.touches[0].clientY - 79

          // 每个字符的大小为20px，通过向下取整获得每次移动的数值，1-25
          const index = Math.floor(( touchY - this.startY ) / 20)

          // 当index大于0.小于等于26的时候向父组件发送请求,发送的内容为letters[index],index作为下标，letters数组内是['A','B'......'Z']
          if (index >= 0 && index < this.letters.length) {
            this.$emit('change',this.letters[index])
          }
        }, 16);
      }
    },
    handleTouchEnd(){
      this.touchStatus = false
    }
  },
};
</script>

<style lang="stylus" scoped>
// 引入外部文件，引入css文件的或者css样式的时候，如果使用别名，要在url地址前加上~
@import '~styles/varibles.styl';

.list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 1.68rem;
  right: 0rem;
  bottom: 0rem;
  width: 0.4rem;

  .item {
    line-height: 0.4rem;
    text-align: center;
    color: $bgColor;
  }
}
</style>
